<template>
  <div>
    <Search :loading="categoryLoading" @click="getCate()">添加分类</Search>
    <MyTable
      :cols="cols"
      :total="total"
      :data="list"
      rowkey="cat_id"
      v-model="querylist"
    >
      <template v-slot:level="{ row: { cat_level } }">
        <el-tag :type="colors[cat_level]">{{ levels[cat_level] }}级</el-tag>
      </template>
      <template v-slot:deleted="{ row: { cat_deleted } }">
        <el-button type="success">{{ cat_deleted }}</el-button>
      </template>
      <template v-slot:action="{ row }">
        <el-button
          size="mini"
          type="primary"
          @click="
            form = { ...row };
            $refs.d.show();
          "
          >编辑</el-button
        >
        <el-button size="mini" type="danger" @click="deletes(row)"
          >删除</el-button
        >
      </template>
    </MyTable>
    <DF
      lw="100px"
      :loading="queryloading"
      :title="title + '分类'"
      :opts="opts"
      v-model="form"
      ref="d"
      @confirm="confirm"
    >
    </DF>
  </div>
</template>

<script>
import { addGoodsCate, editcate, deletecate, addscate } from "api/categories";
import { pageMixins } from "../../mixin/baseMixin";
export default {
  name: "categories",
  mixins: [pageMixins],
  data() {
    return {
      // 分类列表数据
      categoties: [],
      /**
       * 分类loading
       */
      categoryLoading: false,
      levels: ["一", "二", "三"],
      colors: ["", "success", "warning"],
      form: "",
    };
  },
  mounted() {},
  methods: {
    /**
     * 获取分类列表
     */
    async getCate() {
      try {
        this.categoryLoading = true;
        this.categoties = await addGoodsCate({ type: 2 });
        this.form = {};
        this.$refs.d.show();
      } catch (error) {}
      this.categoryLoading = false;
    },
    /**
     * 删除
     */
    async deletes({ cat_id, cat_name }) {
      console.log(cat_id, cat_name);
      let res;
      try {
        res = await this.$myConfirm(`确定要删除吗【${cat_name}】?`);
        await deletecate(cat_id);
        this.$m.success("删除成功");
        this.getCate();
      } catch (error) {}
      res && res();
    },

    /**
     * 添加修改
     */
    async confirm() {
      console.log(this.form);
      const d = this.$refs.d;

      try {
        d.start();
        await (this.form.cat_id ? editcate : addscate)({
          ...this.form,
        ...(this.form.cat_id
          ? {}
          :{
            cat_pid: this.form.cat_pid?.slice(-1)[0]  ?? 0,
          cat_level: this.form.cat_pid?.length ?? 0,
          }),
        }); 
            d.hide();
        this.getcateList();
        this.$m.success(this.title + "成功");
   
      } catch (error) {
        console.log(error);
      }
      d.stop();
    },
    /**
     * 渲染数据
     */ async getcateList() {
      try {
        const { total, result } = await addGoodsCate({
          ...this.querylist,
          type: 2,
        });
        this.list = result;
        this.total = total;
      } catch (error) {}
    },
  },
  computed: {
    cols() {
      return [
        { title: "#", type: "index" },
        { title: "分类名称", name: "cat_name" },
        { title: "是否有效", slot: "deleted", name: "cat_deleted" },
        { title: "排序", name: "cat_level", slot: "level" },
        { title: "操作", slot: "action", align: "center", width: 200 },
      ];
    },
    opts() {
      return {
        cat_name: {
          title: "角色名称",
          required: true,
          max: 20,
        },
        ...(this.form.cat_id) ? {}
       : {cat_pid: {
          title: "父级分类",
          tag: "cas",
          options: this.categoties,
          props: { value: "cat_id", label: "cat_name" },
        },}
      };
    },
    title() {
      return this.form.cat_id ? "修改" : " 添加";
    },
  },

  created() {
    this.getcateList();
  },
};
</script>

<style lang="scss" scoped></style>
